<template>
    <basic-container>
        <TitleComponent mainTitle="奖品名称" subTitle="列表" />
        <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
            v-model="crudData.form" :before-open="beforeOpen" @row-update="rowUpdate" @row-save="rowSave" ref="crud"
            @row-del="rowDel" @on-load="onLoad">

            <template #sort="{ row }">
                <div class="order">
                    <el-popover :visible="row.visible" placement="right" :width="200" trigger="click">
                        <template #reference>
                            <a style="color: #4e9876; border-bottom: dashed 1px #4e9876;" href="javascript:void(0);"
                                @click="row.visible = true"> {{
                                    row.sort
                                }}</a>
                        </template>
                        <div class="hover_box">
                            <el-input v-model="row.sort" placeholder=""></el-input>
                            <div style="margin-top: 10px; display: flex;justify-content: flex-end;">
                                <el-button type="" class="btn" @click="row.visible = false">取消</el-button>
                                <el-button color="#4E9876" @click="orderSubmit(row)">提交</el-button>
                            </div>
                        </div>
                    </el-popover>
                </div>
            </template>
            <template #quanzhong="{ row }">
                <div class="order">
                    <el-popover :visible="row.visible1" placement="right" :width="200" trigger="click">
                        <template #reference>
                            <a style="color: #4e9876; border-bottom: dashed 1px #4e9876;" href="javascript:void(0);"
                                @click="row.visible1 = true"> {{
                                    row.quanzhong
                                }}</a>
                        </template>
                        <div class="hover_box">
                            <el-input v-model="row.quanzhong" placeholder=""></el-input>
                            <div style="margin-top: 10px; display: flex;justify-content: flex-end;">
                                <el-button type="" class="btn" @click="row.visible1 = false">取消</el-button>
                                <el-button color="#4E9876" @click="orderSubmit(row)">提交</el-button>
                            </div>
                        </div>
                    </el-popover>
                </div>
            </template>
            <template #qiyong="{ row }">
                <el-switch v-model="row.qiyong" :active-value="1" @change="(res: any) => changeName9(res, row)"
                    style="--el-switch-on-color: #4E9876; " :inactive-value="0" />
            </template>
            <template #content-label>
                值
            </template>
            <template #content-form="">
                <el-input v-model="crudData.form.content" style="max-width: 600px" placeholder="Please input"
                    class="input-with-select">
                    <template #prepend>
                        <el-icon>
                            <EditPen />
                        </el-icon>
                    </template>
                </el-input>
            </template>
            <template #quanzhong-form="">
                <el-input-number v-model="crudData.form.quanzhong" :min="1" :max="10"
                    style="width: 100%; " />
                <div class="tip">
                    <el-icon>
                        <QuestionFilled />
                    </el-icon>
                    <span class="text">权重越大，获奖几率越高</span>
                </div>
            </template>
            <template #menu-form="{ size }">
                <div class="btns_box">
                    <el-button icon="el-icon-delete" @click="handleEmpty">取消</el-button>
                    <div class="right_box">
                        <el-checkbox v-model="crudData.form.edit" label="继续编辑" size="large" />
                        <el-checkbox v-model="crudData.form.creat" label="继续创建" size="large" v-if="crudData.isEdit" />
                        <el-checkbox v-model="crudData.form.view" label="查看" size="large" class="view_btn" />
                        <el-button icon="el-icon-user" type="primary" @click="handleSubmit">提 交</el-button>
                    </div>
                </div>
            </template>
        </avue-crud>
    </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref } from 'vue';
// import {getList} from "@/api/user/overview.js";
import TitleComponent from "@/components/title/index.vue";
import Editor from '@/components/Editor/index.vue';

const crud = ref('')

let option: any = reactive({
    saveBtn: false,
    updateBtn: false,
    cancelBtn: false,
    rowKey: 'id',
    height: 'auto',
    // calcHeight: 100,
    searchShow: true,
    searchMenuSpan: 6,
    tip: false,
    border: true,
    index: false,
    viewBtn: false,
    editBtn: true,
    delBtn: true,
    addBtn: true,
    dialogWidth: '40%',
    menuFixed: 'right',
    labelWidth: 130,
    menu: true,
    selection: true,
    searchLabelWidth: 110,
    indexLabel: '序号',
    saveBtnText: '确定',
    refreshBtn: true, // 刷新按钮
    columnBtn: false,
    searchShowBtn: false,
    indexWidth: 60,
    align: 'center',
    column: [
        {
            label: "ID",
            prop: "ID",
            sortable: true,
            // hide: true,  // 在列表中不显示 但是在新增和编辑弹窗表单中显示
            // display: false, // 在查看新增和编辑弹窗表单中不显示 在列表中显示
            // addDisplay: true, // 只在新增弹窗中展示/隐藏 同理还有editDisplay: true/false viewDisplay :true/false
            addDisplay: false,
            span: 24,
        },
        {
            label: "奖品名称",
            prop: "name",
            span: 24,
            rules: [
                {
                    required: true,
                    message: '请输入奖品名称',
                    trigger: 'blur',
                },
            ],
        },
        {
            label: "图片",
            prop: "img",
            hide: true,
            span: 24,
            type: 'upload',
            dragFile: true,
            limit: 1,
            propsHttp: {
                res: 'data'
            },
            action: 'https://api.avuejs.com/imgupload',
            rules: [
                {
                    required: true,
                    message: '请选择图片',
                    trigger: 'blur',
                },
            ],
        },
        {
            label: "奖品类型",
            prop: "type",
            span: 24,
            type: 'select',
            dicData: [
                {
                    label: '金额',
                    value: '1'
                }
            ]
        },
        {
            label: "内容",
            prop: "content",
            span: 24,

        },
        {
            label: "权重",
            prop: "quanzhong",
            span: 24,
            type: 'number',
            controlsPosition: 'top',

        },

        {
            label: "排序",
            prop: "sort",
            span: 24,
            type: 'number',
            controlsPosition: 'top',
        },
        {
            label: "获奖概率",
            prop: "gailv",
            span: 24,
            display:false,

        },
        {
            label: "是否启用",
            prop: "qiyong",
            span: 24,
            type: 'switch',
            dicData: [{
                label: '',
                value: 0
            }, {
                label: '',
                value: 1
            }],

        },
        {
            label: "创建时间",
            prop: "time",
            type: 'datetime',
            disabled: true,
            addDisplay: false,
            span: 24,
        },
        {
            label: "更新时间",
            prop: "update",
            type: 'datetime',
            disabled: true,
            sortable: true,
            addDisplay: false,
            span: 24,
        },
    ]
})
let crudData: any = reactive({
    loading: true,
    isEdit:false,
    form: {},
    page: {
        pageSize: 10,
        currentPage: 1,
    },
    data: []
})
const handleEmpty = () => {
    crud.value.resetForm()

}
const handleSubmit = () => {
    crud.value.validate((valid: any, done: () => void, msg: any) => {
        console.log('11111', valid);
        if (valid) {

            ElMessage.success('操作成功');
            setTimeout(() => {
                done()
            }, 2000)
        }
    })
}
const changeName9 = (res: any, row: any) => {
    console.log('row', row);
    console.log('res', res);
}
// 序号按钮提交
const orderSubmit = (row: { visible: boolean; }) => {
    row.visible = false
    console.log('row====', row);
}
// 弹窗打开前
function beforeOpen(done: any, type: any) {
    // type :类型 add -添加 edit -编辑 view -查看
    if (["add"].includes(type)) {
        crudData.isEdit = true
    }
    if (type === 'edit') {
        crudData.isEdit = false
    } else {
    }
    done() //  关闭弹窗
}
const rowSave = async (row: any, done: any, loading: any) => {
    // await remove(row).then(async () => {
    //     done();
    //     onLoad(crudData.page); 
    //     ElMessage.success('操作成功');
    // }).catch((error: any) => {
    //     done();
    // })
    done()
}
// 编辑 -对接口时解开注释
const rowUpdate = async (row: any, index: Number, done: any, loading: any) => {

    // row 带出的这一行的数据
    // await submit(row).then(async () => {
    //     done();
    //     onLoad(crudData.page); 
    //     ElMessage.success('操作成功');
    // }).catch((error: any) => {
    //     done();
    // })

    // loading() 不关闭弹窗可以再次提交
}
// 删除
const rowDel = (form, index, done) => {
    ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            ElMessage.success("删除成功");
            done(form); // 删除逻辑，此处暂未实现删除功能
        })
        .catch(() => { });
};

const onLoad = () => {
    crudData.loading = false;
    crudData.data = [
        {
            ID: '11',
            name: '测试',
            type: '金额',
            content: '3.6',
            quanzhong: '7',
            sort: 999,
            gailv: '58.33%',
            qiyong: 1,
            time:'2022-12-10 18:26:38',
            update: '2022-12-10 18:26:38',
        },
        {
            ID: '11',
            name: '测试',
            type: '金额',
            content: '3.6',
            quanzhong: '7',
            sort: 999,
            gailv: '58.33%',
            qiyong: 1,
            time:'2022-12-10 18:26:38',
            update: '2022-12-10 18:26:38',
        },
    ]
    crudData.page.total = crudData.data.length;

    // getList().then((res: any) => {
    //     console.log('getReviewLog--', res);
    //     const Data = res.data.data;
    //      crudData.page.total = Data.total;
    //     crudData.logData = Data;
    //     crudData.loading = false;
    // });
}
</script>
<style scoped lang="scss">
::v-deep span.avue-crud__img {
    width: 100px;
    height: 100px;
    display: block;

    img {
        width: 90%;
        height: 90%;
        object-fit: cover;
    }
}

.btns_box {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .view_btn {
        margin-right: 20px;
    }
}
.tip{
    margin-top: 10px;
    display: flex;
    align-items: center;
    .text{
        margin-left: 10px;
    }
}
</style>